<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" href="../css/common.css">
    <script type="text/javascript" src="../script/api.js"></script>
    <script language="JavaScript" src="../script/vue.js"></script>
    <script language="JavaScript" src="../script/common.js"></script>
    <style type="text/css">
        .list-body {
            width: 100%;
            background-color: #fff;
            display: flex;
            display: -webkit-flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }

        .left-list {
            width: 5rem;
            height: 562px;
            box-sizing: border-box;
            background-color: #ffffff;
        }

        .rightlist {
            height: 562px;
            overflow-y: scroll;
        }

        .right-body {
            box-sizing: border-box;
            width: 15rem;
            vertical-align: top;
        }

        .right-body .aui-grid-label {
            font-size: 0.6rem;
            color: #666;
        }

        .left-list .aui-list {
            overflow-y: scroll;
            background-color: #fafafa;
        }

        .aui-list .aui-list-item-title {
            font-size: 0.6rem;
            color: #666;
        }

        .search-sug {
            font-size: 0.6rem;
            line-height: 1.2rem;
            padding-left: 0.4rem;
        }

        .sug-list {
            word-break: keep-all;
            line-height: 1.4rem;
        }

        .sug-list span {
            border: 1px solid #d2d2d2;
            border-radius: .2rem;
            color: #151516;
            padding: 0.2rem;
            margin: 0 0.2rem;
        }

        .aui-searchbar-cancel {
            color: #ccc;
        }

        .seltag {
            background-color: #fff;
        }

        .seltag .aui-list-item-title {
            color: #e02e24;
        }
    </style>
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>
    <div id="cat-box">


        <div class="list-body">
            <section class="aui-content left-list">
                <ul class="aui-list aui-list-noborder">
                    <li class="aui-list-item " @click="goright($event,item.id)" v-for="item in typelist">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title">{{item.title}}</div>
                        </div>
                    </li>
                </ul>
            </section>

            <div class="right-body">
                <section class="aui-grid">
                    <ul class="rightlist">
                        <li :locat="item.id" v-for="item in typelist">
                            <div class="subtypebox">
                                <div class="aui-row">
                                    <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
                                        <div class="aui-info-item">
                                            <span class="aui-margin-l-5">{{item.title}}</span>
                                        </div>
                                        <!-- <div class="aui-info-item" @click="golist('parent',item.id)">更多</div> -->
                                    </div>
                                </div>
                                <div class="aui-row">
                                    <div class="aui-col-xs-4" @click="golist('sub',sitem.id)" v-for="sitem in item.sublist" tapmode>
                                  
                                          <img class="bubimg" onload="fnLoadImage(this)"  :data-url="sitem.logo_url" src="../image/default.png" />
                                        <div class="aui-grid-label">{{sitem.title}}</div>
                                    </div>

                                </div>
                            </div>
                        </li>
                </section>
            </div>

        </div>
    </div>
</body>

<script type="text/javascript">
    var pvm = new Vue({
                el: '#cat-box',
                data: {
                    typelist: [],
                },
                methods: {
                    goright: function(e, id) {
                        var el = e.currentTarget;
                         $page.switchnav(e,'seltag');
                        var rel = $api.dom('li[locat="' + id + '"]');
                        rel.scrollIntoView(true);

                    },
                    golist:function(place,tid){
                      if(place=='sub'){
                        $page.openwin("product_sublist"+tid,'./product/sublist.html',{tid:tid});
                      }
                    },
                    load_init: function() {
                        $page.get_data('/api/product/getAllType', 'post', {
                            limit: 6
                        }, function(ret) {
                            pvm.typelist = ret.data;
                        });

                    }

                }
              });

            apiready = function() {
                pvm.load_init();

            };
</script>

</html>
